<!--
 * @Description: 新建/修改租户信息||添加/修改租户产品信息-集合弹框 
 * @Author: 马山
 * @Date: 2020-03-30 15:36:26
 * @LastEditTime: 2020-03-30 12:43:55
 * @LastEditors: 马山
 -->
<template>
    <el-dialog :title="title" :close-on-click-modal="false" :visible="isShow" class="modifyDetailDialog" :before-close="closeDialog">

        <el-form :model="unitData" status-icon :rules="rules" ref="rulesFrom" label-position="left" label-width="110px" size="mini">
            
            <el-form-item label="单位名称：" prop="unitName">
                <el-input v-model="unitData.unitName" clearable type="text" :disabled="!isCreate" ></el-input>
            </el-form-item>
            <el-form-item label="单位ID：" prop="unitId">
                <el-input  v-model="unitData.unitId" clearable :disabled="!isCreate" onkeyup="this.value=this.value.replace(/[^\d-]/g,'')"
                oninput="if(value.length>20)value=value.slice(0,20)" maxlength="20"></el-input>
            </el-form-item>
            <el-form-item label="单位产品类型：" prop="unitProductType">
                <el-select  v-model="unitData.unitProductType">
                    <el-option v-for="cell in unitProductTypeList" :key="cell.value" :label="cell.label" :value="cell.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="单位产品编号：" prop="unitProductCode" v-if="!isCreate">
                <el-input v-model="unitData.unitProductCode" clearable type="text" :disabled="!isCreate" ></el-input>
            </el-form-item>
            <el-form-item label="单位产品名称：" prop="unitProductName">
                <el-input v-model="unitData.unitProductName" clearable type="text" ></el-input>
            </el-form-item>
            <el-form-item label="单位产品码：" prop="unitOrgCode">
                <el-input v-model="unitData.unitOrgCode" clearable type="text" :disabled="!isCreate" ></el-input>
            </el-form-item>


        </el-form>

        <div slot="footer" class="dialog-footer">
            <button class="el-button el-button--primary" @click="submit">确 定</button>
            <button class="el-button el-button--info" @click="closeDialog">取 消</button>
        </div>
    </el-dialog>

    
</template>

<script>



export default {
    name: "modify-detail-dialog",
    props: { },
    components: {},
    computed: {},
    data(){
        // 自定义校验一下单位产品码
        var checkOrgCode = (rule, value, callback) =>{
             let reg=/[0-9a-zA-Z.@_]{1,40}/;
            if(!reg.test(value)){
                callback(new Error('格式不正确，单位产品码限制40个字符以内，只能包含字母、数字和. @_'))
            }else{
                callback()
            }

        };
        return {
            isShow:false,
            title:"", //标题
            isCreate:true,
            //新建修改时的校验规则
            rules:{
                unitName:[ //单位名称
                    { required: true, message: ' ', trigger: 'blur' },
                    // { min: 3, max: 40, message: ' ', trigger: 'blur' }
                ],
                unitId:[  //单位ID
                    { required: true, message: ' ', trigger: 'blur' },
                    // { min: 3, max: 5, message: ' ', trigger: 'blur' }
                ],
                unitProductName:[ //单位产品名称
                    { required: true, message: ' ', trigger: 'blur' },
                    // { min: 3, max: 5, message: ' ', trigger: 'blur' }
                ],
                unitOrgCode:[  //单位产品码
                    { validator: checkOrgCode, trigger: 'blur' },
                    { required: true, message: ' ', trigger: 'blur' },
                    // { min: 3, max: 5, message: ' ', trigger: 'blur' }
                ]
            },
            //所有数据
            unitData:{
                unitName:"",//单位名称
                unitId:"",   //单位ID
                unitProductCode:"", //单位产品编号
                unitProductType:"",  //单位产品类型
                unitProductName:"",   //单位产品名称
                unitOrgCode:"", //单位产品码
            }, 
            // 下拉框数据集
            // 1.租户类型下拉数据
            unitProductTypeList:[
                {
                    value:"1",
                    label:"正式"
                },{
                    value:"2",
                    label:"试用"
                }
            ],
            rowId:"", //缓存当前修改数据的ID
        }
    },
    created() {},
    mounted() {},
    watch: {},
    methods: {

        // 组件入口
        open(data){

            this.title = data.title;
            this.isShow = true;

            // let configData = Object.assign({},data);
            let configData = JSON.parse(JSON.stringify(data.unitData));
            this.rowId = configData.id;
            this.isCreate = data.isCreate;
            let disabled = !data.isCreate;

            this.unitData = {...configData};

            // 租户类型设置
            let type = configData.unitProductType;
            if(type){
                this.unitProductTypeList.forEach(item =>{
                    if(item.value == type){
                        this.unitData.unitProductType = item.value; 
                    }
                });
            }
            
            
        },
        // 提交
        submit(){
            
            this.checkRules( () =>{ //校验一次
                let data = {
                    isCreate:this.isCreate,
                    unitData:this.unitData
                };
                if(this.isCreate){ //新建
                    this.api.createUnitProduct( //创建数据
                        {
                            unitName:this.unitData.unitName, //单位名称
                            unitId:this.unitData.unitId, //单位ID
                            unitProductType:this.unitData.unitProductType, //单位产品类型
                            unitProductName:this.unitData.unitProductName, //单位产品名称
                            unitOrgCode:this.unitData.unitOrgCode, //单位产品码
                        },{loading:true}
                    ).then(res =>{
                        console.log(res)
                        this.$emit("tenantCallback",data);
                    }).catch(err =>{
                        console.log(err);
                        // this.$alert(err.data || err);
                    });
                }else { //修改
                    this.api.updateUnitProduct(
                        {
                            id:this.rowId,//当前修改数据的ID值
                            // unitName:this.unitData.unitName.modelData, //单位名称
                            // unitId:this.unitData.unitId.modelData, //单位ID
                            // unitProductCode:this.unitData.unitProductCode.modelData, //单位产品编号
                            unitProductType:this.unitData.unitProductType, //单位产品类型
                            unitProductName:this.unitData.unitProductName, //单位产品名称
                        }
                    ).then(res =>{
                        console.log(res);
                        this.$emit("tenantCallback",data);
                    }).catch(err =>{
                        console.log(err);
                        // this.$alert(err.data || err);
                    });
                }
            });
            
            
        },
        //检查校验
        checkRules(call){
            this.$refs.rulesFrom.validate((valid) => {
                if (valid) {
                    call && call();
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        closeDialog(){
            this.isShow = false;
            this.$refs.rulesFrom.resetFields(); //重置
        },

    }
};
</script>

<style lang="scss">

.modifyDetailDialog{
    .el-dialog{
        width:380px;
        .el-dialog__body{
            .el-form-item{
                margin-bottom:5px;
            }
        }
    }
    .el-input,.el-textarea{
        width:228px;
        font-size: 12px;
        .el-textarea__inner{
            min-height: 50px;
        }
    }
    .el-select{
        width:228px;
        font-size: 12px;
    }
    .el-select>.el-input{
        width:100%!important;
        font-size: 12px;
    }
    .el-form--label-left .el-form-item__label{
        font-size: 12px;
    }
}

</style>